<template>
    <div>
        <!--<navs title="我的主页"></navs>-->
        <div class="personal-homepage">
            <div class="user">
                <div class="user_box">
                    <div class="user-box-left"><van-button type="default" color="#4482e4" size="small" @click="showImg(user.noticeerweima,2)">接受推送</van-button></div>
                    <div class="user-box-right"><van-button type="default" color="#4482e4" size="small" @click="showImg(user.wxerweima,1)" >联系作者</van-button></div>
                    <div class="d1" @click="showqrcode()">防失联</div>
                    <div class="img"><img :src="user.avatar"></div>
                    <!--<div class="d2">上传</div>-->
                    <!--<div style="margin-right: 6%">-->
                        <!--<van-uploader v-model="fileList1" :preview-image="false" multiple :after-read="upimg1" style="margin-bottom: 20px">-->
                            <!--<div class="d2">上传</div>-->
                        <!--</van-uploader>-->
                    <!--</div>-->


                    <div style="width: 80px; margin-right:6%;"></div>
                </div>
                <p class="p1">{{user.nickname}}</p>
                <p class="p2">{{user.bio}}</p>
            </div>
            <div class="user_bar">
                <div class="number">我的料({{materialsnumber}})</div>
            </div>
        </div>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                loading-text="加载中"
                :immediate-check="false"
                @load="onLoad"
        >
            <div class="personal-homepage-list">
                <div class="my-data">
                    <ul>
                        <li v-for="(item, index) in list">
                            <div class="box-r4" @click="detail(item.id)">
                                <div class="open_icon" v-if="item.isregularpublic==1"><img src="../../assets/img/open_icon.png"></div>
                                <div class="my-data_title">
                                    <div class="top">
                                        <div>
                                            <div class="time">
                                                <i class="i_1" v-if="item.mtype=='1'">红</i>
                                                <i class="i_2" v-else-if="item.mtype=='2'">黑</i>
                                                <i class="i_3" v-else-if="item.mtype=='3'">走</i>
                                                {{item.createtime}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="my-data_title">
                                    <div class="left">
                                        <p>
                                            <!--<span class="isreturn" :class="" style="background:#fff;color: #000;border: none" v-if="item.isreturn!=1">【体育资讯】</span>-->
                                            <span class="isreturn" style="background-color: #4482E4;border: 0.5px solid #4482E4;" :class="{'isreturnColor': item.isreturn!=1}"  @click.stop="showReturn(item.isreturn)">{{item.isreturn!=1?'【体育资讯】':'体育资讯'}}</span>
                                            {{item.title}}
                                        </p>
                                    </div>
                                    <div class="right"><p class="red_ft">{{item.price}}</p></div>
                                </div>
                                <div v-if="item.gametime" style=" text-align: right; color: #ff0101;">比赛时间：{{item.gametime}}</div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </van-list>

        <div class="popslerweima" v-if="showerweima" @click="showqrcode()">
            <img :src="Url+homeerweima"  @touchstart.prevent="qrcodeimgStart()" @touchend.prevent="qrcodeimgEnd()"  ref="qrcode"/>
        </div>
        <div class="seller-details_bar noticebar" v-if="mbtsbutton==1" @click="showgzerwm()"><a class="update"><span>接收推送</span></a></div>
        <div v-if="showcode01" class="pop">
            <div class="popmain">
                <div class="titlepop">接收消息通知</div>
                <div class="usermsg">
                    <img :src="users_gz.avatar"/>
                    <div class="usermsg_r">
                        <div class="name">{{users_gz.nickname}}</div>
                        <div class="tips">关注<span>“红料大全”</span>，就能第一时间收到我的更新推送哦～</div>
                    </div>
                </div>
                <img :src="Url+erweimagz" class="guanzhucode"/>
                <div class="tips01">↑↑长按识别二维码，订阅推送消息</div>
                <img src="../../assets/img/closeicon.png" class="closeicon" @click="showcode01=false"/>
            </div>
        </div>
        <van-image-preview v-model="previewShow" :images="images">
            <template v-slot:index>
                <div style="margin-right: 6%">
                    <van-uploader v-model="fileList1" :preview-image="false" multiple :after-read="upimg1"
                                  style="margin-bottom: 20px">
                        <div class="d2" style="display: none;">{{uploadText}}</div>
                    </van-uploader>
                </div>
            </template>
        </van-image-preview>
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    </div>
</template>

<script>
    import QrCode from 'qrcode-decoder';
    import navs from '@/components/navs';
    import { ImagePreview } from 'vant';
    export default {
        name: "",
        data(){
            return {
                userid:"",
                loading: false,
                finished: false,
                show: false,
                previewShow: false,
                page:0,
                user:"",
                isreturnText: "体育资讯",
                uploadType: null,
                list:[],
                pics: [],
                fileList1:[],
                images:[],
                actions: [{ name: '接受推送',value:2 }, { name: '联系作者',value:1 }, { name: '取消' ,value:0}],
                materialsnumber:0,
                showerweima:false,
                homeerweima:'',
                mbtsbutton:"",   //是否显示关注公主号按钮   1 显示  0 不显示
                showcode01:false,
                users_gz:"",
                Loop:null,
                imgShow: false,
            }
        },
        components: {
            navs,
            [ImagePreview.Component.name]: ImagePreview.Component,
        },
        mounted(){
            this.userid=this.$route.params.id;
            // this.homeShow();
            this.slerweima();
            this.getgzherweima();
            this.onLoad();

        },
        methods:{
            /* 不对返还 */
            showReturn(type){
                if(type != 1) return false;
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '不对返还',
                    showCancelButton: false,
                    overlayStyle: {backgroundColor: 'black'}
                })
                    .then(() => {
                        // on confirm
                    })
            },
            /* 展示图片 */
            showImg(imgUrl,type){
                if(!imgUrl){
                    this.$dialog.alert({
                        title: '',
                        message: '如需上传图片请联系平台客服',
                    }).then(() => {});
                    return false;
                }
                this.previewShow = true;
                this.uploadType = type;
                if(imgUrl){
                    this.uploadText = '更新二维码';
                }else {
                    this.uploadText = '请上传图片';
                }
                this.images.splice(0,1,(this.Url + imgUrl));
                // ImagePreview([this.Url + imgUrl]);
            },
            onSelect(item) {
                // 默认情况下点击选项时不会自动收起
                // 可以通过 close-on-click-action 属性开启自动收起
                this.show = false;
                if(item.value != 0){
                    this.getuserqrcode(this.pics[0],item.value);
                }
            },
            upimg1(file){
                var that=this;

                if(file.constructor===Array){
                    for(var i=0; i<file.length; i++){
                        file[i].status = 'uploading';
                        file[i].message = '上传中';

                        let fd = new FormData();
                        fd.append('file', file[i].file);
                        that.saveImg(fd,file[i]);
                    }
                }else {
                    file.status = 'uploading';
                    file.message = '上传中';
                    let fd = new FormData();
                    fd.append('file', file.file);

                    that.saveImg(fd,file);
                }
            },
            saveImg(fd,file){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/common/upload",
                    params: fd,
                    success: function (res) {
                        console.log(res);
                        if (res.data.code == 1) {
                            that.pics.push(res.data.data.url);
                            // that.show = true;
                            that.getuserqrcode(res.data.data.url);
                            // that.$dialog.confirm({
                            //     title: '提示',
                            //     message: '请选择上传对象',
                            //     confirmButtonText: '上传联系作者',
                            //     showCancelButton: true,
                            //     cancelButtonText: "上传接受推送"
                            // }).then(() => {
                            //     that.getuserqrcode(res.data.data.url,1);
                            // }).catch(() => {
                            //     that.getuserqrcode(res.data.data.url,2);
                            // });

                            file.status = 'done';
                            file.message = '上传成功';
                        } else {
                            file.status = 'failed';
                            file.message = '上传失败';
                            that.$toast(res.data.msg);
                        }
                    },
                    fail:function (error) {
                        file.status = 'failed';
                        file.message = '上传失败';
                        that.$toast(error.data.msg);
                    }
                })
            },
            getuserqrcode(imgUri){
                let that = this;
                let data = {};
                if(that.uploadType == 1){
                    data = {
                        wxerweima: imgUri
                    }
                }else {
                    data = {
                        noticeerweima: imgUri
                    }
                }
                that.request1.post1({
                    url: that.Url + "api/user/index/userqrcode",
                    params: data,
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.$toast('修改成功');
                            that.pics = [];
                            that.homeShow();
                            that.images.splice(0,1,(that.Url + imgUri));
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            //  长按识别二维码 开始
            qrcodeimgStart:function () {
                var that=this;
                clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
                this.Loop = setTimeout(function() {
                    that.$dialog.confirm({
                        message: '识别图中二维码',
                    }).then(() => {
                        // on confirm
                        var qr = new QrCode();

                        let img = this.$refs['qrcode']
                        console.log(img);
                        qr.decodeFromImage(img,{
                            crossOrigin: "anonymous"
                        }).then((res) => {
                            console.log(res.data);
                            var ress=res.data;
                            var url = that.Url + 'api' + ress.match(/api(\S*)/)[1];
                            location.href=url;
                        });
                    })
                        .catch(() => {
                            // on cancel
                        });

                }.bind(this), 1000);
            },
            //  长按识别二维码 结束
            qrcodeimgEnd(){
                clearTimeout(this.Loop);
            },
            getgzherweima(){
                var that=this;


                that.request1.get1({
                    url: that.Url + "api/user.index/showgzherweima",
                    params: {
                        userid:that.userid
                    },
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.erweimagz=res.data.data.gzherweima;
                            that.users_gz=res.data.data.user;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            //点击接收推送按钮
            showgzerwm(){
                this.showcode01=true;
            },
            detail(id){
                this.$router.push({ path:'/Wodeliao/womaideliaoxq/'+id})
            },
            // 显示/隐藏二维码
            showqrcode(){
                this.showerweima=this.showerweima?false:true;
            },
            //防失联二维码
            slerweima(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.index/slerweima",
                    params: {userid:that.userid },
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.homeerweima=res.data.data.homeerweima;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            //我的料触底加载更多
            onLoad() {
                console.log('不执行呢');
                // 异步更新数据
                this.page++;
                this.homeShow();
            },
            homeShow(){
                this.loading = true;
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.index/homeShow",
                    params: {
                        userid:that.userid,
                       page:that.page
                    },
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.materialsnumber=res.data.data.materialsnumber;
                            that.user=res.data.data.user;
                            // that.list=res.data.data.materials;
                            that.mbtsbutton=res.data.data.mbtsbutton;
                           var ress=res.data.data.materials;
                            if (that.page >= res.data.data.allpage) {
                                // 加载结束
                                that.list.push.apply(that.list,ress)
                                that.finished = true;
                            }else {
                                that.list.push.apply(that.list,ress)
                                that.loading = false;
                            }
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .pop{
        width: 100%;
        height:100%;
        background: rgba(0,0,0,0.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }
    .pop .popmain{
        width: 80%;
        height: 420px;
        background: #fff;
        border-radius: 5px;
        position: absolute;
        left: 10%;
        top: calc(50% - 210px);
        padding: 12px;
        box-sizing: border-box;
    }
    .pop .popmain .closeicon{
        position: absolute;
        right: 16px;
        top: 20px;
        width: 14px;
        height: 14px;
    }
    .pop .popmain .titlepop{
        position: relative;
        text-align: center;
        font-size: 16px;
        line-height: 36px;
    }
    .pop .popmain .usermsg{
        width: 94%;
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        justify-content: space-between;
        margin: 20px auto;
    }
    .pop .popmain .usermsg img{
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }
    .pop .popmain .usermsg .usermsg_r{
        width: calc(100% - 62px);
    }
    .pop .popmain .usermsg .usermsg_r .name{
        font-size: 14px;
        line-height: 36px;
    }
    .pop .popmain .tips{
        border: 1px solid #ebd9a0;
        background: #faf3d8;
        width: 100%;
        padding: 4px 10px;
        box-sizing: border-box;
        border-radius: 4px;
    }
    .pop .popmain .tips span{
        color: red;
    }
    .pop .popmain .guanzhucode{
        width: 148px;
        height: 148px;
        display: block;
        margin:28px auto 0;
    }
    .pop .popmain .tips01{
        width: 100%;
        line-height: 28px;
        margin:20px auto;
        text-align: center;
        background: #fdfbb9;
        border-radius: 14px;
        color: #ca7952;
        font-size: 14px;
    }
    .seller-details_bar {
        height: 36px;
        width: 56px;
        position: fixed;
        bottom: 15px;
        right: 15px;
        padding-top: 20px;
        background: url() #fc5d4d no-repeat center 11px;
        background-size: 14px;
        border-radius: 100px;
    }
    .seller-details_bar a {
        display: block;
        height: 36px;
        line-height: 30px;
        width: 56px;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }
    .seller-details_bar a span {
        display: inline-block;
    }
    .seller-details_bar.noticebar{
        background: url("../../assets/img/noticeicon.png") #4482e4 no-repeat center 10px;
        bottom: 24px;
        right: 15px;
        border: 4px solid #b3cffc;
    }
    .personal-homepage {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .personal-homepage .user {
        background: #fff;
        width: 100%;
        overflow: hidden;
        padding-bottom: 10px;
        height: 118px;
    }
    .personal-homepage .user .user_box {
        display: -webkit-box;
        position: relative;
    }
    .personal-homepage .user .user-box-left{
        position: absolute;
        top: 2%;
        left: 8%;
        z-index: 9;
    }
    .personal-homepage .user .user-box-right{
        position: absolute;
        top: 2%;
        right: 8%;
        z-index: 9;
    }
    .personal-homepage .user .user_box > div.d1 {
        width: 50px;
        padding-left: 30px;
        font-size: 13px;
        color: #999;
        margin-top: 40px;
        margin-left: 6%;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        background: url() 8px no-repeat;
        background-size: 16px;
        border: 1px dashed #e7e7e9;
    }
    .personal-homepage .user .user_box .img {
        width: 100%;
        -webkit-box-flex: 1;
        margin-top: 10px;
    }
    .personal-homepage .user .user_box .img img {
        width: 60px;
        height: 60px;
        display: block;
        border-radius: 30px;
        margin: 0 auto;
    }
    .d2 {
        width: 80px;
        background: #4482e4;
        height: 30px;
        border-radius: 4px;
        text-align: center;
        line-height: 30px;
        font-size: 13px;
        color: #fff;
        margin: 20px 0 0 0;
    }
    .personal-homepage .user .user_box > div.d2.active {
        background: #d9d9d9;
    }
    .personal-homepage .user p.p1 {
        margin-top: 4px;
        font-weight: 700;
        font-size: 16px;
        text-align: center;
    }
    .personal-homepage .user p.p2 {
        margin-top: 2px;
        font-size: 13px;
        color: #999;
        text-align: center;
    }
    .personal-homepage .user_bar {
        height: 40px;
        box-shadow: 0 5px 10px rgba(0,0,0,.04);
        background: #fff;
        border-top: .5px solid #efeff4;
        display: -webkit-box;
        width: 100%;
    }
    .personal-homepage .user_bar .number {
        -webkit-box-flex: 1;
        height: 37px;
        line-height: 37px;
        font-weight: 700;
        text-align: center;
        font-size: 12px;
        margin: 0 15px;
        border-bottom: 3px solid #fff;
    }
    .personal-homepage-list .my-data ul {
        margin-bottom: 80px;
        margin-top: 177px;
    }
    .box-r4, .red_btn {
        border-radius: 4px;
    }
    .box-r4 {
        display: block;
        background: #fff;
        margin: 7px 10px 0;
        padding: 0 15px;
        overflow: hidden;
    }
    .my-data ul li {
        display: block;
        position: relative;
    }
    .personal-homepage-list .my-data .box-r4 {
        padding: 10px 15px;
        position: relative;
    }
    .my-data ul li .my-data_title {
        display: -webkit-box;
        padding-top: 8px;
        line-height: 22px;
        margin-bottom: 5px;
    }
    .personal-homepage-list .my-data .box-r4 .my-data_title {
        padding-top: 0;
    }
    .my-data ul li .my-data_title .top {
        width: 100%;
        position: relative;
    }
    .my-data ul li .my-data_title .time {
        float: left;
        color: #999;
        font-size: 12px;
    }
    .my-data ul li .my-data_title .left {
        -webkit-box-flex: 1;
    }
    .my-data ul li .my-data_title .left p {
        display: block;
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }
    .my-data_title .left p .isreturn{
        border: 0.5px solid #ef4433;
        background: #ef4433;
        border-radius:5px;
        color: #fff;
        font-size: 12px;
        padding: 1px 6px;
    }
    .my-data ul li .my-data_title .right {
        width: 75px;
    }
    .red_ft {
        color: #fc5d4d !important;
    }
    .my-data ul li .my-data_title .right p {
        display: block;
        line-height: 22px;
        text-align: right;
        font-weight: 700;
        font-size: 18px;
    }
    .my-data ul li .open_icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        border-radius: 4px 0 0 0;
        overflow: hidden;
    }
    .personal-homepage-list .my-data .box-r4 .open_icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        border-radius: 4px 0 0 0;
        overflow: hidden;
    }
    .my-data ul li .open_icon img {
        display: block;
        width: 22px;
    }
    .personal-homepage-list .my-data .box-r4 .open_icon img {
        display: block;
        width: 22px;
    }
    .my-data ul li .my-data_title .time i {
        display: inline-block;
        font-style: normal;
        height: 18px;
        line-height: 18px;
        margin-right: 6px;
    }
    .my-data ul li .my-data_title .time i.i_1 {
        border: .5px solid #ef4433;
        background: #ef4433;
        border-radius: 2px;
        padding: 0 3px;
        color: #fff;
    }
    .my-data ul li .my-data_title .time i.i_2 {
        border: .5px solid #707070;
        background: #707070;
        color: #fff;
        border-radius: 2px;
        padding: 0 3px;
    }
    .my-data ul li .my-data_title .time i.i_3 {
        border: .5px solid #4482e4;
        background: #4482e4;
        border-radius: 2px;
        padding: 0 3px;
        color: #fff;
    }
    .popslerweima{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
        background: rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99;
    }
    .popslerweima img{
        max-width: 100%;
        max-height: 100%;
    }

</style>